<template>
    <!-- swiper固定写法 开始
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <swiper :options="swiperOptions" ref="indexSwiper">
                
                <swiper-slide>
                   这里是具体的内容部分 
                </swiper-slide>

                //这是他的分页器
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div> 
      swiper固定写法 开始-->

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <swiper :options="swiperOptions" ref="indexSwiper">
                
                <swiper-slide
                  v-for="(item, index) of swiperData"
                  :key="index">

                     <slider-inner
                      :data="item"
                     ></slider-inner>

                </swiper-slide>

                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';//（轮播图的插件）导出swiper和swiperSlide这两组件，swiper是swiperSlide的父组件
import 'swiper/dist/css/swiper.min.css';//swiper这个插件的样式，也得导出来
import SliderInner from './SliderInner'

export default {
    name: 'IndexSwiper',
    props: {
        swiperData: Array
    },
    components: {
        swiper,
        swiperSlide,
        SliderInner
    },

    data () {
        return {
            //swiper配置项
            swiperOptions: {
                //分页器
                pagination: {
                    el: '.swiper-pagination',//指定元素
                    clickable: true,//可以被点击
                },
                autoloop: true,//可连续轮播(轮播完一圈继续接着轮播)
                loopedSlider: 1,//从第一张开始轮播的 
                autoplay: true,//自动轮播
                speed: 700,//每张切换过度的速度
            },
            //cod...
        }
    },

}
</script>

<style lang="scss" scoped>

  // >>> 这是样式穿透的写法   
   .swiper-wrapper >>> .swiper-pagination-bullet {
       background-color: red;
   }

   .swiper-wrapper >>> .swiper-pagination-bullet-active {
       background-color: #fff;
   }

</style>